@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-stepper';
@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';

.icon {
  @include composite-var($stepper-step-status-container);

  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  svg {
    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
  }

  &[data-state='completed'] {
    color: $sys-primary-accent-default;
    background-color: $sys-primary-decor-default;
  }

  &[data-state='current'] {
    color: $sys-primary-on-accent;
    background-color: $sys-primary-accent-default;
  }

  &[data-state='waiting'] {
    box-sizing: border-box;
    color: $sys-neutral-text-support;
    border-color: $sys-neutral-decor-default;
    border-style: solid;
  }

  &[data-state='loading'] {
    box-sizing: border-box;
    color: $sys-neutral-accent-default;
    border-color: $sys-neutral-decor-default;
    border-style: solid;
  }

  &[data-state='rejected'] {
    color: $sys-red-on-accent;
    background-color: $sys-red-accent-default;
  }
}